Form 表單

• <form>：有 action 來確定要送出的地方，method 則是送出的方法
• <input>：用來輸入資料
  • type：依需求修改總類，如 text 就是輸入文字， submit 則是送出鈕
  • name：則是用定義好的名稱來與接收資料端溝通
  • placeholder：未輸入時之顯示內容
• <label>：可用來說明，並且在點擊時可關聯到對應的 id
  • for：for id，點了可到指定的 id 位置，如指定的 <input>

<form action="送出的地方" method="送出資料的方法">
    表單內容
    <input type="text" name="mail">
    <input type="text" name="phone">
    <input type="submit" value="next">
</form>

呈現結果並試著輸入一些內容

按下 submit 按鈕，觀察網址列
會在最後面出現剛剛輸入的資料，從 ? 開始

index.html?mail=xxx%40mail&phone=0900

增加說明文字等資料

    <form action="">
        <label for="mail">電子郵件：</label>
        <input id="mail" type="text" placeholder="請輸入電子郵件"  name="mail">
        <br>
        <label for="phone">電話：</label>
        <input id="phone" type="text" placeholder="請輸入電話" name="phone">
        <br>
        <input type="submit" value="next">
    </form>

參考資料

• HTML 表單元件 - <input> 標籤 (tag)
• HTML <label> 表單欄位標題

次回

繼續說明 HTML 的表單